<template>
  <div class="page-layout">
    <div class="page-layout-nav">
      <navmenu></navmenu>
    </div>
    <div class="page-layout-con">
      <div class="page-layout-itemhead">
        <itemhead></itemhead>
      </div>
      <div class="page-layout-itembody">
        <div class="common-layout">
          <div class="left">
            <p>关于我</p>
            <el-avatar
              :size="50"
              src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"
            />
            <h3>{{ name }}</h3>
            <span>{{ role == 2 ? "超级管理员" : "管理员" }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import itemhead from "@/views/layout/components/itemhead.vue";
import { mapState } from "vuex";
import navmenu from "@/views/layout/components/navmenu.vue";
export default {
  name: "personal",
  components: {
    itemhead,
    navmenu,
  },
  data() {
    return {};
  },
  computed: {
    ...mapState(["isshow", "name", "role"]),
  },
};
</script>

<style lang="scss" scoped>
.page-layout {
  display: flex;
  height: 100%;
  overflow: hidden;
  .page-layout-nav::-webkit-scrollbar {
    width: 10px;
  }
  .page-layout-nav::-webkit-scrollbar-thumb {
    border-radius: 32px;
    background-color: rgba(205, 200, 200, 0.863);
    // background-color: gray;
  }
  .page-layout-nav::-webkit-scrollbar-track {
    border-radius: 32px;
    // background-color: #1c7abd;
    background-color: rgb(248, 244, 244);
  }
  .page-layout-nav {
    height: 100%;
    // background: skyblue;
    // background-color: gray;
    overflow: auto;
  }
  .page-layout-con {
    flex: 1;
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    ::-webkit-scrollbar {
      width: 10px;
    }
    ::-webkit-scrollbar-thumb {
      border-radius: 32px;
      background-color: #49b1f5;
      // background-color: gray;
    }
    ::-webkit-scrollbar-track {
      border-radius: 32px;
      // background-color: #1c7abd;
      background-color: gray;
    }
  }
}
.page-layout-itemhead {
  // width: 100%;
  height: 50px;
  background: gray;
}
.page-layout-itembody {
  flex: 1;
  // background: pink;
  background-color: rgb(210, 208, 208);
  overflow-y: auto;
  padding: 20px;
  position: relative;
  .common-layout {
    display: flex;
    width: 400px;
    height: 400px;
    position: absolute;
    top: 30%;
    left: 50%;
    transform: translate((-50%, -50%));
    .left {
      display: flex;
      flex-direction: column;
      text-align: center;
      margin: auto;
      .el-avatar {
        margin-left: 15px;
      }
    }
  }
}
</style>
